<template>
  <view>
    <!-- 搜索 -->
    <!-- <uni-search-bar @confirm="search" @input="input" @cancel="cancel" /> -->
     <tui-list-cell>
       <div class="flex">
         <div class="item">
           <button class="tui-btn tui-btn-mini tui-white tui-outline-fillet" hover-class="tui-white-hover" @click="show('startTime')">{{startTime||'开始时间'}}</button>
         </div>
         <div class="geduan">-</div>
         <div class="item">
           <button class="tui-btn tui-btn-mini tui-white tui-outline-fillet" hover-class="tui-white-hover" @click="show('endTime')">{{endTime||'结束时间'}}</button>
          </div>
         <div class="">
           <button  @click="searchHandler" class="tui-btn tui-btn-mini tui-primary-outline pr5" hover-class="tui-white-hover" >搜索</button>
           <button v-if="isCancel" class="tui-btn tui-btn-mini tui-white" hover-class="tui-white-hover" @click="cancelSearch">重置</button>
          
         </div>
       </div>
     </tui-list-cell>
     <tui-dateTime ref="dateTime" :type="2" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		 :setDateTime="setDateTime" @confirm="change($event,'startTime')"></tui-dateTime>
      <tui-dateTime ref="dateTime2" :type="2" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		 :setDateTime="setDateTime" @confirm="change($event,'endTime')"></tui-dateTime>

     <!-- 列表 -->
    <tui-list-view title="" class="tui-list-view">
      <tui-list-cell
        v-for="(item,index) in approvalList"
        :key="index"
        @click="goDetailPage(item)"
        class="tui-msg"
      >
        <view class="tui-msg-box">
           <view class="tui-msg-item">
            <view class="tui-msg-name">{{item.procDefName}}</view>
            <view class="tui-msg-content" v-if="item.taskName">
              <view  class="tui-tag-small tui-tag-outline tui-primary-outline tui-tag-outline-fillet">{{item.taskName}}</view>
              
              </view>
          </view>
        </view>
        <view class="tui-msg-right">
          <!-- <tui-icon name="arrowright" :size="26" color="#bbb" style="line-height:48px;"></tui-icon> -->
          <view v-if="item.taskCreateTime" class="tui-msg-time">{{item.taskCreateTime |dateFormat}}</view>
          <view v-else class="tui-msg-time">{{item.startTime |dateFormat}}</view>
        </view>
      </tui-list-cell>
    </tui-list-view>
    <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
  </view>
</template>

<script>
import moment from 'moment';
import {navigate,user} from '@/common/framework';
import {
  getApprovalListToMe,
  getApprovalListFromMe,
  getApprovalListFinshMe,
  getApprovalList
} from "@/pages/work/interface.js";


export default {
  data() {
    return {
      approvalList: [],
      assignee: "",
      startUser: "",
      currentPage: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      loadMoreText: "",
      opts: {},

      startYear: 1980,
      endYear: 2030,
      cancelColor: "#888",
      color: "#5677fc",
      setDateTime: "",
      startTime:'',
      endTime:'',
      isCancel:false
    };
  },
  onLoad(options) {
    console.log("options:", options);
    this.opts = options;
    this.initData();
  },
  onUnload() {
    (this.max = 0),
      (this.data = []),
      (this.loadMoreText = "加载更多"),
      (this.showLoadMore = false);
  },
  onReachBottom() {
    console.log("onReachBottom");
    this.loadMoreText = "加载中...!";
    if (this.total && this.currentPage >= Math.ceil(this.total/this.pageSize)) {
      this.loadMoreText = "没有更多数据了!";
      return;
    }
    this.showLoadMore = true;
    this.currentPage++;
    this.initData(true);
  },
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
    this.initData();
  },
  methods: {
    searchHandler(){
      if(this.startTime&&this.endTime){
        this.isCancel=this.startTime&&this.endTime?true:false;
        this.initData();
      }else{
        uni.showToast({
          icon:'none',
          title:"请选择时间！"
        })
        return;
      }
    },
    cancelSearch(){
      this.startTime='';
      this.endTime='';
      this.isCancel=false;
      this.initData();
    },
    show: function(type) {
				this.cancelColor = "#888";
				this.color = "#5677fc";
				this.setDateTime = "";
				this.startYear = 1980;
				this.endYear = 2030;
				console.log(type);
				type=='startTime'?this.$refs.dateTime.show():this.$refs.dateTime2.show()
			},
			change: function(e,key) {
				console.log(e,key)
				this[key] = moment(e.result).format('YYYY-MM-DD HH:mm:ss')
			},
    initData(isLoadMore) {
      let user_ = user.getUserInfo();
      !isLoadMore ? (this.currentPage = 1) : null;
      switch (this.opts.approalType) {
        case "1": //待我审批 approalType = 1;
          this.assignee = user_.userName;
          this.getApprovalListToMes(isLoadMore);
          break;
        case "2": //我发起的审批 approalType = 2;
          this.startUser = user_.userName;
          this.getApprovalListFromMes(isLoadMore);
          break;
        case "3": //我已经审批的 approalType = 3;
          this.assignee = user_.userName;
          this.getApprovalListFinshMes(isLoadMore);
          break;
        default:
          //全部审批;
          this.getApprovalLists(isLoadMore);
          break;
      }
    },
    // 待我审批
    async getApprovalListToMes(isLoadMore) {
      let params = {
        tenantId: "kmlc",
        assignee: this.assignee,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        taskName: this.searchVal,
        beginDate: this.startTime,
        endDate: this.endTime
      };
      console.log("params:", params);
      let Res = await getApprovalListToMe(params);
      console.log(Res);
      if (Res && Res.success) {
        this.currentPage = Res.result.currentPage;
        this.pageSize = Res.result.pageSize;
        this.total = Res.result.total;
        this.approvalList = isLoadMore
          ? [...this.approvalList, ...Res.result.records]
          : Res.result.records;
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "获取失败~！"
        });
      }
    },
    async getApprovalListFromMes(isLoadMore) {
      let params = {
        tenantId: "kmlc",
        startUser: this.startUser,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        taskName: this.searchVal,
        beginDate: this.startTime,
        endDate: this.endTime,
      };
      console.log("params:", params);
      let Res = await getApprovalListFromMe(params);
      console.log(Res);
      if (Res && Res.success) {
        this.currentPage = Res.result.currentPage;
        this.pageSize = Res.result.pageSize;
        this.total = Res.result.total;
        this.approvalList = isLoadMore
          ? [...this.approvalList, ...Res.result.records]
          : Res.result.records;
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "获取失败~！"
        });
      }
    },
    async getApprovalListFinshMes(isLoadMore) {
      let params = {
        tenantId: "kmlc",
        assignee: this.assignee,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        taskName: this.searchVal,
        beginDate: this.startTime,
        endDate: this.endTime,
      };
      console.log("params:", params);
      let Res = await getApprovalListFromMe(params);
      console.log(Res);
      if (Res && Res.success) {
        this.currentPage = Res.result.currentPage;
        this.pageSize = Res.result.pageSize;
        this.total = Res.result.total;
        this.approvalList = isLoadMore
          ? [...this.approvalList, ...Res.result.records]
          : Res.result.records;
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "获取失败~！"
        });
      }
    },
    async getApprovalLists(isLoadMore) {
      let params = {
        tenantId: "kmlc",
        // assignee:this.assignee,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        taskName: this.searchVal,
        beginDate: this.startTime,
        endDate: this.endTime,
      };
      console.log("params:", params);
      let Res = await getApprovalList(params);
      console.log(Res);
      if (Res && Res.success) {
        this.currentPage = Res.result.currentPage;
        this.pageSize = Res.result.pageSize;
        this.total = Res.result.total;
        this.approvalList = isLoadMore
          ? [...this.approvalList, ...Res.result.records]
          : Res.result.records;
      } else {
        uni.showToast({
          icon: "none",
          title: Res.message || "获取失败~！"
        });
      }
    },
    
    goDetailPage(item){
      // 采购流程：purchaseEnter
      // 领用流程：approval
      // 出库流程：output
      // 入库流程：enter
      
      let url='/pages/work/building/building';
      let {procInsId,businessKey,procDefKey} = item;
      if(procDefKey){
        switch(procDefKey){
          case 'purchaseEnter':
            url = `/pages/work/approval_detail/approval_detail?procInsId=${procInsId}&businessKey=${businessKey}`;
          break;
          case 'approval':
            url = `/pages/work/approval_receive_detail/approval_receive_detail?procInsId=${procInsId}&businessKey=${businessKey}`;
          break;
          case 'output':
            // url = `/pages/work/approval_detail/approval_detail?procInsId=${procInsId}&businessKey=${businessKey}`;
          break;
          case 'enter':
            // url = `/pages/work/approval_detail/approval_detail?procInsId=${procInsId}&businessKey=${businessKey}`;
          break;
          default:break;
        }
      }
      
      url &&navigate.gotoPage(url);
   
    }
    // searchInput(){
    //     console.log('object');
    //     navigate.gotoPage('/pages/work/approval_query_serach/approval_query_serach');
    // }
  }
};
</script>


<style lang="scss">
.tui-msg-box {
  display: flex;
  align-items: center;
}

.tui-msg-pic {
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  display: block;
  margin-right: 24upx;
}

.tui-msg-item {
  max-width: 500upx;
  min-height: 60upx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tui-msg-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 34upx;
  line-height: 1;
  color: #262b3a;
}

.tui-msg-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 26upx;
  line-height: 1;
  color: #9397a4;
}

.tui-msg-right {
  max-width: 320upx;
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.tui-msg-right.tui-right-dot {
  height: 76upx;
  padding-bottom: 10upx;
}

.tui-msg-time {
  width: 100%;
  font-size: 24upx;
  line-height: 24upx;
  color: #9397a4;
}


	.tui-searchbox {
        
        background-color: #fff;
		padding: 30upx 30upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-search-input {
		width: 100%;
		height: 66upx;
		border-radius: 35upx;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}

	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16upx;
		font-size: 28upx;
	}

	.tui-input-plholder {
		font-size: 28upx;
		color: #b2b2b2;
	}

	.tui-cancle {
		color: #888;
		font-size: 28upx;
		padding-left: 30upx;
		flex-shrink: 0;
	}

  .flex{
    display: flex;
    width: 100%;
    .item{
      flex: 1;
    }
  }
  .searchbtn{
    height: 24px;
    padding: 7px 12px;
    line-height: 24px;
    font-size: 13px;
    background: #FFF;
  }
  .tui-outline-fillet{
    width: 95%;
  }
  .tui-btn-mini{
    font-size: 26upx;
  }
  .pr5{
    margin-right: 8upx;
  }
</style>